<template>
	<view class="crumbs">
		<!-- 面包屑 -->
		<view class="crumbs">
			<view class="crumbs-item" v-for="(i, j) in PathAccessHistory" :key="j" @click="onSkip(j)" :data-id="i.id" :class="TXTComputed(j)">
				<span>{{ i.text }}</span>
				<view class="theMiddletriangle" :class='TriangleComputed(j)'></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		path: {
			type: [Array],
			default: function() {
				return [{ id: 1, text: '面包' }];
			}
		}
	},
	name: 'crumbs',
	data() {
		return {
			PathAccessHistory: [] // 路径访问历史
		};
	},
	created() {
		this.PathAccessHistory = this.path;
	},
	watch: {
		PathAccessHistory() {
		},
		path() {
			this.PathAccessHistory = this.path;
		}
	},
	computed: {
		TriangleComputed(e){
			return (e)=>{
				if(this.PathAccessHistory.length==1){
					// 1个嘛
					return "theMiddletriangle-active"
				}
				if(this.PathAccessHistory.length>=2){
					// 2个嘛
					if(this.PathAccessHistory.length-1 == e) return 'theMiddletriangle-active'
					return ""
				}
			}
		},
		TXTComputed(e) {
			return e => {
				if(this.PathAccessHistory.length==1){
					// 1个嘛
					return ""
				}
				if(this.PathAccessHistory.length==2){
					// 2个嘛
					if(this.PathAccessHistory.length-1 == e) return ''
					return "crumbs-item-active crumbs-item-activeS"
				}
				if(this.PathAccessHistory.length>2){
					// 2个嘛
					if(this.PathAccessHistory.length-2 == e) return 'crumbs-item-active crumbs-item-activeS'
					if(this.PathAccessHistory.length-1 == e) return ''
					return "crumbs-item-active"
				}
			};
		}
	},
	methods: {
		// 点击单个路径 跳转
		onSkip(index) {
			console.log(index)
			// 点击最后一个路径 不做操作
			if (index == this.PathAccessHistory.length - 1) return;
			this.PathAccessHistory = this.PathAccessHistory.slice(0, index + 1);
			
			let arr = this.PathAccessHistory.slice(0, index + 1); // 切割

			// 组装路径    	cxy/aa/cc/
			let return_path = '';
			for (let i = 0; arr[i]; i++) {
				if(i==0) continue
				return_path += arr[i].text + '/';
			}
			console.log('返回当前路径：如果是第一个则返回空：',return_path)
			// 重刷文件路径接口
			this.$emit('freshFolder', return_path);
			this.$emit('freshCurrentPath', return_path);
		}
	}
};
</script>

<style lang="less" scoped="scoped">
@bgcolor: #f5f5f5;
@activeColor: #fff;
/* 面包屑盒子 */
.crumbs {
	height: 88rpx;
	font-size: 28rpx;
	display: flex;
	width: 100%;
	white-space: nowrap;
	overflow-x: scroll;
	background-color: @bgcolor;
	display: flex;
	align-items: center;
}

/* 每块路径 */
.crumbs-item {
	height: 80rpx;
	line-height: 80rpx;
	box-sizing: border-box;
	display: flex;
}

/* 每块路径下的文本块 */
.crumbs-item > span {
	padding: 0 20rpx;
	max-width: 200rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 第一个重改margin-left */
.crumbs-item:nth-child(1) {
	margin-left: 0;
}

/* after伪类的三角形 */
.crumbs-item::after {
	box-sizing: border-box;
	content: '';
	display: inline-block;
	margin-left: -76rpx;
	border-top: 40rpx solid transparent;
	border-left: 40rpx solid transparent;
	border-right: 0rpx solid transparent;
	border-bottom: 40rpx solid transparent;
	z-index: 1;
}

/* 中间件的三角形 */
.theMiddletriangle {
	border-top: 40rpx solid transparent;
	border-left: 40rpx solid @activeColor;
	border-right: 40rpx solid transparent;
	border-bottom: 40rpx solid transparent;
	z-index: 3;
}
/* 面包屑路径激活 */
.crumbs-item-active {
	background-color: @activeColor;
}
/* 面包屑路径激活,覆盖伪类 */
.crumbs-item-active::after {
	background-color: @activeColor;
	border-left: 40rpx solid @bgcolor;
}

/* 覆盖白色区域 */
.crumbs-item-activeS::after {
	background-color: @bgcolor;
}

/* 中间件三角形块隐藏 */
.theMiddletriangle-active {
	visibility: hidden;
}
</style>
